<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>结果</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />
    <style>
    #main1 {
        width: 98%!important;
        height: 100%!important;
    }
    #btncx {
        top: 0;
    }
    .main{
		box-shadow: none;
	}
	.title {
	    width: 100%;
	    height: 500px;
	    border: none;
	}
    .title1 {
        width: 56%;
    	height: 400px;
   	 	border: none;
    	box-shadow: none;
    }

    .title2 {
	    width: 38%;
	    left: 60%;
	    height: 400px;
	    border: none;
	    box-shadow: none;
    }

    #main1 {
        width: 98%;
        height: 470px;
        margin-top: 0;
    }

    .classified-search {
        margin-bottom: 0;
    }

    #main1 p {
        font-size: 22px;
        margin: 0;
        margin-bottom: 2px;
    }

    #main1 {
        /*      position: relative;
            top: 0px;
            color: red;*/
    }
	.tableBox {
        padding-bottom: 10px;
        margin-left: 2%;
        margin: 2% auto;
        width: 97%;
        height: 100%;
        /*min-height: 550px;*/
        background-color: #fff;
        box-shadow: 3px 3px 20px 3px #ddd;
        display: none;
    }
    .title p {
	    border-bottom: 1px solid #eeeeee;
	    padding-bottom: 15px;
	    padding-top: 15px;
	    background: #fafafa;
	    text-align: center;
	    font-size: 18px;
	}

    </style>
</head>

<body>
    <div class="classifiedBox">
        <div class="classified-search">
            <form class="form-horizontal" style="margin-bottom: 5px;">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <p style="float: left;line-height: 34px;">日期范围：</p>
                            <div class="input-prepend input-group" style="float: left;width:150px ;">
                                <span class="add-on input-group-addon">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                </span>
                                <input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" />
                            </div>
                            <p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>
                        </div>
                    </div>
                </fieldset>
            </form>
            <div class="selection-classification">
                <div class="selectionR">产品分类：</div>
                <div class="selectionL">
                    <span id="allsingleproducts" class="selected">全部单品</span>
                    <span id="yxgjp_sh">医学高级（搜狐）</span>
                    <span id="yxgjp_tt">医学高级（今日头条）</span>
                    <span id="zzysp_sh">主治医师（搜狐）</span>
                    <span id="zzysp_tt">主治医师（今日头条）</span>
                    <i>（*多选）</i>
                </div>
            </div>
            <!--<div class="purchase-situation">
                版本分类：
                <span class="selected" id="2">全部版本</span>
                <span id="1">题库班</span>
                <span id="0">精讲课程班</span>
                <span id="0">无忧通关班</span>
                <span id="0">无忧协议班</span>
                <span id="0">精英定制班</span>
                <span id="0">密训私教班</span>
                <i>（*单选）</i>
            </div>-->
            <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
            <!--<div class="refresh">
                    <img src="../../img/refresh.png" alt="">
                    <a class="tabReload" href="#">刷新当前</a>
                </div>-->
        </div>
    </div>
    <!--数据展示结果-->
    <img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
    <div class="tableBox" style="display: none;">
        <div class="title" style="width:100%">
            <p>注册人数占比图与趋势图</p>
            <ul class="title1">
                <!--<li class="list1">注册人数占比图</li>-->
                <li id="main1" class="main">
                </li>
            </ul>
            <ul class="title2">
                <!--<li class="list1">注册人数趋势图</li>-->
                <li id="main2" class="main">
                </li>
            </ul>
        </div>
    </div>
    <script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
    <!--<script src="../js/charts/Chart.js"></script>-->
    <script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
    <script type="text/javascript" src="../../js/base/echarts.js"></script>
    <script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../../js/base/ajax.js"></script>
    <script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
    <script type="text/javascript" src="../../js/base/dialog.js"></script>
    <script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/riqi/moment.js"></script>
    <script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>
    <script type="text/javascript">
    var myDate = new Date(); //添加日期
    y = myDate.getFullYear();
    m = myDate.getMonth() + 1;
    d = myDate.getDate() - 1;
    if (myDate.getDate() == 1) {
        d = myDate.getDate();
    }
    dqy = y + "-" + m + "-" + d;
    $('#reservation').val(dqy + " - " + dqy)
    $(document).ready(function() {
        $('#reservation').daterangepicker({
            // startDate: moment().startOf('day'),  
            //endDate: moment(),  
            //minDate: '01/01/2012',    //最小时间  
            maxDate: moment(), //最大时间   
            dateLimit: {
                days: 60
            }, //起止时间的最大间隔  
            showDropdowns: true,
            showWeekNumbers: false, //是否显示第几周  
            timePicker: false, //是否显示小时和分钟  
            timePickerIncrement: 60, //时间的增量，单位为分钟  
            timePicker12Hour: false, //是否使用12小时制来显示时间  
            ranges: {
                //'最近1小时': [moment().subtract('hours',1), moment()],  
                '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                '最近7日': [moment().subtract('days', 6), moment()],
                '最近30日': [moment().subtract('days', 29), moment()],
                '最近60日': [moment().subtract('days', 59), moment()]
            },
            opens: 'right', //日期选择框的弹出位置  
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary blue',
            cancelClass: 'btn-small',
            format: 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
            separator: ' - ',
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '从',
                toLabel: '到',
                weekLabel: 'W',
                customRangeLabel: '选择时间',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ]
                //                          firstDay : 1  
            }
        }, function(start, end, label) { //格式化日期显示框  
            $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        });

    });
    $(document).on('click', '.applyBtn', function() { //判断日期是否是在60天之内
        var val = $('#reservation').val().split(' - ');
        var endTime = new Date(val[1]);
        var startTime = new Date(val[0]);
        if (endTime - startTime > 5270400000) {
            $('.daterangepicker').css('display', 'block')
            G_Prg.alert('每次最多选取60天', function() {

            });
        }
    })
    var clients = [];
    var clientsName = [];
    var hTimes = ["0点", "1点", "2点", "3点", "4点", "5点", "6点", "7点", "8点", "9点",
        "10点", "11点", "12点", "13点", "14点", "15点", "16点", "17点", "18点", "19点",
        "20点", "21点", "22点", "23点"
    ];
    var hwChart;
    var swChart;
    var times = []; //两个日期之间的区间
    var menuData1 = G_Prg.getSoftMenuData().Childs[0];
    var menuData2 = G_Prg.getSoftMenuData().Childs[1];
    this.init = function() {
        var option = {};
        var dd = new Date();
        var m = dd.getMonth() + 1;
        var d1 = dd.getDate();
        //var d2=dd.getDate();
        var days1 = G_Prg.GetDay(dd.getFullYear(), m, d1);
        var days2 = dd.getFullYear() + '-' + m + '-' + d1;
        $('#logmin').val(days1);
        $('#logmax').val(days1);
        allclick(); //点击事件

    }

    /**************************************************
     * 功能：点击事件
     * 函数名：allclick（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-03-13
     *************************************************/
    function allclick() {
        //刷新页面
        $('.refresh').on('click', function() {
            window.location.reload();
        })
        //1.所有功能选择
        $('.selectionL span').on('click', function() {
            if($(this).attr('id')=='allsingleproducts'){
				$(this).addClass('selected').siblings().removeClass('selected');
			}else{ 
			   if($(this).hasClass('selected')){
                   $(this).removeClass('selected');
                   $('.selectionL span').eq(0).removeClass('selected');
               }else{
                   $(this).addClass('selected')
                   $('.selectionL span').eq(0).removeClass('selected');
               }
			}

        })
        //2.切换情况选项
        $('.purchase-situation span').on('click', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                $(this).addClass('selected').siblings().removeClass('selected');
            }
        })
        //查询结果
        $('#btncx').on('click', function() {
            var val = $('#reservation').val().split(' - ');
            var startTime = new Date(val[0]);
            var endTime = new Date(val[1]);
            if (endTime - startTime < 5270400000) {
                $('.loadingimg').show();
                setTimeout(function() {
                    $('.tableBox').show();
                    getRegistNewCount();
                    window.onresize = function() {
                        swChart.resize();
                    }
                }, 500)
            } else {
                G_Prg.alert('每次最多选取60天');
            }
        })
    }
    /**************************************************
     * 功能：折线图
     * 函数名：Canvas1（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-03-30
     *************************************************/
    function Canvas1(jsonData,times) {
    	
        var series = [];
        var xAxis = [];
        // $('.titleNum').append('全部产品总注册人数：'+_total);
        var StyleSin = function() {
            return {
                data: [],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        fontFamily: "microsoft yahei",
                        fontSize: 12
                    }
                }

            }
        };
        var Item = function() {
            return {
                name: '',
                type: 'line',
                itemStyle: { normal: {} },
                label: { normal: {} },
                data: []
            }
        };
        for (var i = 0; i < jsonData.peopleList.length; i++) {
            var it = new Item();
            var style = new StyleSin();
            it.name = '人数';
            it.type = 'line';
            it.data = jsonData.peopleList[i].numbers.split(',');
            style.data = times;
            style.type = 'category';
            style.boundaryGap = false;
            style.name = '(时间)';
            series.push(it); // 将item放在series中
            xAxis.push(style);
        }
        // 基于准备好的dom，初始化echarts实例
        swChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        option = {
            title: {
                x: '20',
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [{
                    name: '人数',
                    textStyle: { fontWeight: 'bold', color: '#3c8dbc', fontSize: 16 }
                }]
            },
            grid: {
                left: '5%',
                bottom: '2%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            series: []

        };
        option.series = series;
        option.xAxis = [{ //修改上面的日期
            axisLabel: { show: true },
            splitLine: { show: false },
            textStyle: { color: "#000", fontFamily: "microsoft yahei", fontSize: 12 },
            boundaryGap: false,
            name: "(时间)",
            type: "category",
            data: xAxis[0].data
        }];
        // 使用刚指定的配置项和数据显示图表。
        swChart.setOption(option);
    }
    /**************************************************
     * 功能：饼状图
     * 函数名：canvas2（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-10-25
     *************************************************/
    function Canvas2(jsonData, clientsName) {
    	
        for (var i = 0; i < jsonData.bolo.length; i++) {
            jsonData.bolo[i].name = clientsName[i];
        }
        console.log(clientsName)
        // 基于准备好的dom，初始化echarts实例
        hwChart = echarts.init(document.getElementById('main2'));
        var option1 = {
            title: {
                text: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: clientsName
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '10%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [{
                name: '来源',
                type: 'pie',
                radius: '60%',
                center: ['45%', '50%'],
                data: jsonData.bolo,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        //使用刚指定的配置项和数据显示图表。
        hwChart.setOption(option1);
    }

    /**
     * 线性图 && 饼状图
     * @api      /api/new/userRegistNewCount (https://tongji.ksbao.com:8003)
     * @method   getRegistNewCount
     * @Author   刘淳昊
     * @DateTime 2017-10-25
     * @Changed  无
     * @return   无
     */
    function getRegistNewCount() {
        var val = $('#reservation').val().split(' - ');
        var startDay = G_Prg.datetimeFormat(new Date(val[0]), 'yyyy-MM-dd');
        var endDay = G_Prg.datetimeFormat(new Date(val[1]), 'yyyy-MM-dd');

        var clients = []; //所选的功能
        var clientsName = []; //所选的功能中文名
        $('.selectionL .selected').each(function() {
            if ($(this).attr('id') === 'all') {
                clients = ['allsingleproducts'];
                clientsName.push($(this).text());
            }else{
            	clients.push($(this).attr('id'));
            	clientsName.push($(this).text());
            }
        });

        getAll(startDay, endDay);

        var appvn = $('.purchase-situation .selected').html();
        clients = JSON.stringify(clients);

        var _url = '/api/new/userBuyNewCount?startDay=' + startDay + '&endDay=' + endDay + '&appvn=全部版本&clients=' + clients;
        G_AjaxApi.get(_url, false, function(json) {
            var jsonData = JSON.parse(json);
            if (jsonData.status == 200) {
                if (jsonData.data.length == 0) {
                    $('.loadingimg').hide();
                    console.log('数据为空，可能暂时未传到服务器或者直接找景华！');
                } else {
                    $('.titleNum').empty();
                    $('.loadingimg').hide();
                    Canvas1(jsonData.data,times);
                    Canvas2(jsonData.data,clientsName);
                }
            } else {
                console.log('数据库出错');
            }
        })
    }

    /**********************************************************
     * 功能：获取日期区间
     * ********************************************************/
    Date.prototype.format = function() {
        var s = '';
        s += this.getFullYear() + '-'; // 获取年份。
        s += (this.getMonth() + 1) + "-"; // 获取月份。
        s += this.getDate(); // 获取日。
        return (s); // 返回日期。
    };

    function getAll(begin, end) {
        times = [];
        var ab = begin.split("-");
        var ae = end.split("-");
        var db = new Date();
        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
        var de = new Date();
        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
        var unixDb = db.getTime();
        var unixDe = de.getTime();
        for (var k = unixDb; k <= unixDe;) {
            times.push((new Date(parseInt(k))).format());
            k = k + 24 * 60 * 60 * 1000;
        }
    }

    init();
    </script>
</body>

</html>